<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>标签</title>
    <link rel="icon" href="/images/icon.png">


</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary menu stackable">
                 <h2 class="ui teal header item">远行者log</h2>
                <a href="/" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="/page_types" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="/page_tags" class="m-item item m-mobile-hide active"><i class="tags icon"></i>标签</a>
                <a href="/archives" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="/about" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="m-item right item  m-mobile-hide">
                    <form action="/search" method="get">
                        <div class="ui action input inverted transparent ">
                            <input type="text" name="title" placeholder="search...">
                            <button class="ui icon button" type="submit">
                                <i class="search icon"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <a id="b1" href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big m-opacity-mini">
        <div class="ui container">
            <!--头部-->
            <div class="ui segment top attached">
                <div class="ui middle aligned grid two column">
                    <div class="column">
                        <h3 class="ui header teal">标签</h3>
                    </div>
                    <div class="column right aligned">
                        共<h2 class="ui orange header m-inline-block mth" th:text="${tags.size()}">&nbsp;14&nbsp; </h2>个
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment">
                <a th:each="tag,iter:${tags}"  th:href="@{'/page_tags?tagId='+${tag.getId()}}">

                    <div class="ui labeled button m-margin-tb-tiny" th:if="${tag.getId()== tagId}">
                        <div class="ui basic teal button" th:text="${tag.getName()}">一年总结</div>
                        <div class="ui basic teal left pointing label" th:text="${tag.getNumber()}">12</div>
                    </div>
                    <div class="ui labeled button m-margin-tb-tiny" th:unless="${tag.getId()==tagId}">
                        <div  class="ui basic  button" th:text="${tag.getName()}">一年总结</div>
                        <div class="ui basic left pointing label" th:text="${tag.getNumber()}">12</div>
                    </div>
                </a>

            </div>

            <div class="ui teal segment ">
                <!--列表-->
                <div class="ui attached segment ">
                    <div th:if="${blogs.size()==0}"><h2>没有更多的博客啦！不过未来说不定会有哦！QAQ</h2></div>
                    <div class="ui padded segment vertical m-padded-b-small m-mobile-clear" th:each="blog,iter:${blogs}">
                        <div class="ui grid mobile reversed stackable">
                            <div class="ui ten wide column">
                                <a th:href="@{'/page_blog/'+${blog.getId()}}" target="_blank">
                                    <h3 class="ui header" th:text="${blog.getTitle()}" >【一年总结】记我的大一生活</h3>
                                </a>

                                <p class="m-text-thin m-text-lined m-text-spaced" th:text="${blog.getSummary()}">去年夏天，平平无奇的我过着平平无奇的生活。一年之后，依旧是那个夏天，依旧是那个我，只是此时的我成了别人口中的“大佬”。而同是参加软件创新实验室的集训，别人是听课的那个，而我是讲课的那个。我感慨无限，是啊，奋斗真的可以改变人呢！</p>
                                <div class="ui grid">
                                    <div class="seven wide column">
                                        <div class="ui list horizontal link mini ">
                                            <div class="item">
                                                <img src="/images/头像.jpg" class="ui avatar image">
                                                <div class="content"><a href="#" class="header "> 杨洋</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon" ></i><span th:text="${#dates.format(blog.getDate(),'yyyy-MM-dd')}">2020-7-04</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i><span th:text="${blog.getViews()}">3012</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="nine wide column right aligned ">
                                        <a th:each="tag1,iter:${blog.getTags()}" th:href="@{'/page_tags?tagId='+${tag1.getId()}}" target="_blank" class="ui label teal basic m-padded-tiny" th:text="${tag1.getName()}">一年总结</a>
                                    </div>
                                </div>
                            </div>
                            <div class="ui six wide column">
                                <a th:href="@{'/page_blog/'+${blog.getId()}}" target="_blank">
                                    <img th:src="${blog.getPictureUrl()}" alt="" class="ui round image">
                                </a>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
            <!--底部-->
            <div class="ui bottom attached segment">
                <div class="ui middle aligned grid two column">
                    <div class="column">
                        <a class="ui button basic mini teal" th:href="@{'/page_tags?tagId='+${tagId}+'&begin='+${begin-size}+'&size='+${size}}">上一页</a>
                    </div>
                    <div class="column right aligned">
                        <a class="ui button basic mini teal" th:href="@{'/page_tags?tagId='+${tagId}+'&begin='+${begin+size}+'&size='+${size}}">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-opacity-tiny">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="two wide column ">
                    <h4 class="ui inverted header item m-text-thin m-text-spaced m-opacity-mini" >微信联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="/images/QRcode.png" class="ui rounded image item" style="width: 100px">
                        </div>
                    </div>

                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item m-text-lined" th:each="newBlog,iter:${newBlogs}" th:href="@{'/page_blog/'+${newBlog.getId()}}" th:text="${newBlog.getTitle()}">博客1</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <p class="item m-text-lined" href="#">QQ:1079325857</p>
                        <p class="item m-text-lined" href="#">email:yangyangpm@aliyun.com</p>
                        <a class="item m-text-lined" href="https://blog.csdn.net/weixin_55669208?spm=1000.2115.3001.5343">CSDN博客</a>
                    </div>
                </div>
                <div class="six wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">工具栏</h4>
                    <a class="item m-text-lined" href="https://ai.xiabb.chat">AI【对话】【写作】【绘图】</a>
                    <p class="item m-text-lined" href="#">AI账号:yangyangpm@aliyun.com</p>
                    <p class="item m-text-lined" href="#">AI密码:yangjingyuanonline</p>
                    <p class="item m-text-lined" href="#">密码每周星期一更新,如失效,请联系我</p>
                </div>
            </div>
            <div class="ui divider "></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny m-text-lined">版权 © 2023 杨洋  </p>
            <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备 2023036698 号</a>
        </div>
    </footer>


<script src="/js/jquery-3.5.1.min.js"/>
<script src="/Semantic-UI-CSS-master/semantic.min.js"/>
<script type="text/javascript">
// $('.menu.toggle').click(function (){
//     $('.m-item').toggleClass('m-mobile-hide');
// });
//不知道为什么达不到预期的效果
    $("#b1").click(function (){
        $(".m-item").toggleClass("m-mobile-hide");
    });
    $('#payButton').popup({
    popup:$('.popup.payQR'),
    on:'click',
    position:'bottom center'
    })

</script>
</body>
</html>
